<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title :titleName="auditData.Flow.Name">
        <template slot="btn">
          <el-button class="filter-item" plain="" size="small" @click="handleBack">返回
          </el-button>
          <!-- <el-button type="primary" size="small"
            v-hasPermi="{v:['stability:approval'],isF:(ruleForm.stability_status === 2 && isAudit  )}"
            @click="handlApproval">
            审批
          </el-button> -->
          <approval :affair.sync="auditData" :is-text="false" @refresh="refreshData"
            @submit="onSubmit" @toEdit="toEdit" @cancel="onCancel" />
        </template>
      </modules-title>
    </div>
    <div style="padding:20px">
      <item-title title="基础数据" :borderShow="false" />
      <el-tabs type="border-card" style="margin-bottom:20px" class="box">
        <el-tab-pane label="稳定性方案明细">
          <plan :plan-data="ruleForm" :sample-list="sampleList" :checl-samp="checlSamp"
            :conditions-inve="conditionsInve"></plan>
        </el-tab-pane>
        <el-tab-pane label="检查项目表明细">
          <check :check-data="checkData" :stability='ruleForm.stability_scheme_type'
            :check-list="checkList"></check>
        </el-tab-pane>
        <el-tab-pane label="稳定性试验放样信息">
          <experiment :check-data="checkData" :experiment="experiment"></experiment>
        </el-tab-pane>
      </el-tabs>
      <item-title title="审批记录" :borderShow="false" />
      <comment-view :datas="auditData" />
    </div>
    <!--对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body
      :before-close="cancel" :close-on-click-modal="false" v-if="open">
      <el-form ref="formOpen" :model="formOpen" :rules="rules" label-width="120px" size="small">
        <el-form-item label="审批结论" prop="stability_status">
          <el-radio-group v-model="formOpen.stability_status">
            <el-radio v-for="(item,index) in buttonList" :key="index" :label="item.Type">
              {{item.Name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见" prop="idea">
          <el-input v-model="formOpen.idea" type="textarea" placeholder="请输入审批意见" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain size="small" @click="cancel">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { approval, stabilityDetail } from "@/api/stability/giveUp";

export default {
  components: {
    plan: () => import("../../components/plan.vue"),
    check: () => import("../../components/check.vue"),
    experiment: () => import("../../components/experiment.vue")
  },
  data() {
    return {
      ruleForm: {
        version_no: ""
      },
      checkData: {},
      checkList: [],
      experiment: [],
      sampleList: [],
      checlSamp: [],
      conditionsInve: [],
      open: false,
      title: "",
      formOpen: {
        stability_status: undefined,
        idea: "",
        id: ""
      },
      rules: {
        stability_status: [
          { required: true, message: "请选择审批结论", trigger: "change" }
        ],
        idea: [{ required: true, message: "请输入审批意见", trigger: "blur" }]
      },
      auditData: {
        Flow:{}
      },
      auditButtonName: "审批",
      isAudit: false,
      userInfo: null,
      buttonList: []
    };
  },
  //是计算属性，也可以理解为一个方法。
  computed: {},
  //属性是手动定义的所需监听的值
  watch: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.handlEditor();
    this.userInfo = this.$store.getters.userInfo;
    if (this.$route.query) {
      this.getAuditData(this.$route.query.f_id);
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
  methods: {
    //获取编辑数据
    handlEditor() {
      stabilityDetail(this.$route.query.f_id).then(res => {
        if (res.code === 200) {
          this.ruleForm = res.data || [];
          if (res.data.stability_table_info !== "") {
            this.checkData = JSON.parse(res.data.stability_table_info) || {};
          }
          if (res.data.stability_plan !== "") {
            this.experiment = JSON.parse(res.data.stability_plan) || [];
          }
          this.checkList = res.data.stability_details || [];
          this.sampleList = res.data.sample_list || [];
          this.sampleList.forEach(item => {
            this.checlSamp.push(item.id);
          });
          this.conditionsInve = res.data.stability_details;
        }
      });
    },

    //返回
    handleBack() {
      this.$route.params.refresh = true;
      this.$router.go(-1);
    },

    //审批
    handlApproval() {
      this.open = true;
      this.title = "审批流程";
      this.formOpen.id = this.$route.query.id;
    },

    getAuditData(id) {
      this.$api.PROJECT_START_CHECK_DETAIL(id).then(res => {
        if (res.code === 200) {
          this.auditData = res.data;
          this.getButton();
        }
      });
    },
    getButton() {
      if (
        this.auditData.State !== "Done" ||
        this.auditData.State !== "Refuse"
      ) {
        if (this.auditData.Next && this.auditData.Next.length) {
          for (let i = 0; i < this.auditData.Next.length; i++) {
            const data = this.auditData.Next[i];
            const index = data.Staffs.findIndex(
              a => a === this.userInfo.user.id
            );
            if (index !== -1) {
              this.isAudit = true;
              this.auditButtonName = data.ItemName;
              this.buttonList = data.Buttons || [];
              let sss = this.buttonList.findIndex(a => a.Type == "Cancel");
              if (sss !== -1) {
                this.buttonList.splice(sss, 1);
              }
              break;
            }
          }
        }
      }
    },

    //取消
    cancel() {
      this.open = false;
      this.formOpen = {
        stability_status: undefined,
        idea: "",
        id: ""
      };
    },

    //审批确定
    submitForm() {
      this.formOpen.id = this.ruleForm.id;
      this.$refs.formOpen.validate(valid => {
        if (valid) {
          approval(this.formOpen).then(res => {
            if (res.code === 200) {
              this.$message.success("提交成功");
              this.handlEditor();
              this.getAuditData(this.$route.query.f_id);
              this.cancel();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          return false;
        }
      });
    },

    refreshData() {
      this.handlEditor();
    },
    toEdit(affairs) {
      this.$router.push({
        path: "/stability/giveUp/created",
        query: { id: this.ruleForm.id, type: 1 }
      });
    },
    // affairsId, stepId , type  //选择类型, template //备注, RejectStepId  //步骤id
    onSubmit(affairsId, stepId, type, template, RejectStepId, callback) {
      console.log(affairsId, stepId, type, template, RejectStepId);
      const subdata = {
        stability_status: type,
        idea: template.Remark,
        id: this.ruleForm.id,
        Files: template.Files
      };
      approval(subdata).then(res => {
        if (res.code === 200) {
          this.$message.success("审批成功");
          this.handlEditor();
          this.getAuditData(this.$route.query.f_id);
          callback(true);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    onCancel(affairsId, stepId, type, template, RejectStepId, callback) {
      const subdata = {
        flow_id: this.$route.query.f_id,
        model_type: "StabilityScheme"
      };
      this.$comFun.cancelFunc(subdata)
        .then(() => {
          callback(true);
          this.$message({
            type: "success",
            message: "已撤销"
          });
          this.handlEditor();
          this.getAuditData(this.$route.query.f_id);
          callback(true);
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    //查看详情
    toDetails(id) {
      let newQuery = { id: id };
      this.$router.replace({
        query: newQuery
      });
      location.reload();
    }
  }
};
</script>
<style scoped lang="scss">
@import "@/styles/variables.scss";

::v-deep .box_card {
  border: none !important;
}

.title-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  height: 30px;

  .left {
    width: 100px;

    .title-con {
      font-size: 16px;
      color: $main-color;
      padding-left: $block-space-x;
      border-left: 2px solid $main-color;
    }
  }

  .right {
    width: 300px;
    padding-left: 30px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between !important;
  }
}

ul {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* @import url(); 引入css类 */
::v-deep .el-card__body {
  padding: 20px 0;
}

.box {
  //height: 850px;
  overflow-y: auto !important;
  color: #000;
  font-size: 16px;
}

::v-deep .box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .box::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: #cccccc;
}

::v-deep .box::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
